iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Software Development

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列 第 17

[實作篇]WebRTC APIs - RTCDataChannel ( 檔案傳輸 )

  • 分享至 

  • xImage
  •  

學習目標

  • 運用 RTCDataChannel 在 peers 間傳遞文檔(File data)

附上完整程式碼

實作

利用 RTCDataChannel 實作簡單檔案上傳及傳送

HTML

以下是這次的模板:

  • input[file]: 檔案上傳
  • sendFile Button / abort Button
  • progress bar / bitrate / status : 方便展示拆分檔案傳輸的狀態顯示
<section>
  <div>
    <form id="fileInfo">
      <input type="file" id="fileInput" name="files"/>
    </form>
    <button disabled id="sendFile">Send</button>
    <button disabled id="abortButton">Abort</button>
  </div>

  <div class="progress">
    <div class="label">Send progress: </div>
    <progress id="sendProgress" max="0" value="0"></progress>
  </div>

  <div class="progress">
    <div class="label">Receive progress: </div>
    <progress id="receiveProgress" max="0" value="0"></progress>
  </div>

  <div id="bitrate"></div>
  <a id="download"></a>
  <span id="status"></span>
</section>

功能

引用先前範例,一樣先用RTCPeerConnection建立起兩端點的連線溝通,
並在localPeer(發送端)透過createDataChannel()建立RTCDataChannel實例,而這次要實作傳輸檔案。

const configuration = null;
localPeer = buildPeerConnection(localPeer, configuration);
datachannel = localPeer.createDataChannel("my local channel");
datachannel.binaryType = 'arraybuffer'; // datachannel 只夠接受兩種二進制資料類型: Blob / ArrayBuffer
datachannel.onopen = onChannelStageChange(datachannel);
datachannel.onclose = onChannelStageChange(datachannel);

remotePeer = buildPeerConnection(remotePeer, configuration);
remotePeer.ondatachannel = receiveChannelCallback;
await communication(localPeer, remotePeer);
function sendData() {
  const file = fileInput.files[0];

  // Handle 0 size files.
  if (file.size === 0) {
    statusMessage.textContent = 'File is empty';
    closeDataChannels();
    return;
  }
  document.querySelector('progress#sendProgress').max = file.size;
  document.querySelector('progress#receiveProgress').max = file.size;
  const chunkSize = 16384;

  const fileReader = new FileReader();
  let offset = 0;
  fileReader.addEventListener('error', error => console.error('Error reading file:', error));
  fileReader.addEventListener('abort', event => console.log('File reading aborted:', event));
  fileReader.addEventListener('load', e => {
    datachannel.send(e.target.result); // send data
    offset += e.target.result.byteLength; // ArrayBuffer 大小
    document.querySelector('progress#sendProgress').value = offset;
    if (offset < file.size) {
      readSlice(offset);
    }
  });
  const readSlice = o => {
    const slice = file.slice(offset, o + chunkSize); // 為了限制單次傳輸大小,透過Blob.slice 取出一定範圍內的資料
    fileReader.readAsArrayBuffer(slice); // 透過fileReader讀取Blob資料並轉為ArrayBuffer
  };
  readSlice(0);
}

<input type=file>中取出的檔案(File object),是一種特殊的Blobobject,可被用在任何接受 Blob 物件的地方,
而這邊透過datachannel傳輸檔案時每次的傳輸量有其上限
所以透過FileReader.readAsArrayBuffer()讀取Blob並轉為ArrayBuffer(因為datachannel只接受Blob或ArrayBuffer兩種binary type),
在FileReader.readAsArrayBuffer讀取Blob時觸發的loadEvent 進行資料的拆分跟傳送(send)。

function receiveChannelCallback(event) {
  // ...
  receiveChannel = event.channel;
  receiveChannel.binaryType = 'arraybuffer';
  receiveChannel.onmessage = onReceiveMessageCallback;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
  // ...
}
let receiveBuffer = []; // 已接收的 arrayBuffer 數據
let receivedSize = 0; // 已接收的數據大小

// ...
function onReceiveMessageCallback(event) {
  receiveBuffer.push(event.data);
  receivedSize += event.data.byteLength;

  document.querySelector('progress#receiveProgress').value = receivedSize;

  // 這邊的file之後應該要透過signaling server傳遞過來才能得知(ex: file name, size...等)
  const file = fileInput.files[0];
  if (receivedSize === file.size) {
    const received = new Blob(receiveBuffer); // ArrayBuffer to Blob
    receiveBuffer = [];

    document.querySelector('a#download').href = URL.createObjectURL(received);
    document.querySelector('a#download').download = file.name;
    // ...
    closeDataChannels();
  }
}

接收端(receive)接收到資料後,先暫存起來,等完整資料接收完畢後,再進行處理,
這邊是將完整資料轉為Blob,方便對文件的操作(例如範例:利用URL.createObjectURL轉為url賦值給a.href讓使用者能下載檔案)。

注意: 這只是簡單演示WebRTC api的運用,所以目前沒有Signal Server作為中介者幫我們傳遞兩邊的信令,因此也不適用於真正的應用上。

延伸思考:

  • 嘗試將receive的datachannel設定的binaryTypeBlob
  • 嘗試調高chunkSize看看各瀏覽器的行為。
  • 嘗試在read file過程中使用FileReader.abort()

總結

本章節了解到:

  • 如何在兩個 WebRTC端點間透過 data channel 進行檔案傳輸
  • Data channel所能傳遞的檔案類型Blob & ArrayBuffer
  • Data channel每次傳輸量的上限
新手入門,如有錯誤,歡迎指正~~~

系列文章同步更新於部落格


上一篇
[知識篇]WebRTC APIs - RTCDataChannel (屬性及事件)
下一篇
[知識篇]WebAPIs - Blob
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言